<template>
    <mescroll-uni
        ref="mescrollRef"
        @init="mescrollInit"
        :height="height"
        :down="downOption"
        @down="downRefresh"
        :up="upOption"
        @up="getData">
        <payment-record-item v-for="(item, index) in datas" :key="index" :data="item"></payment-record-item>
    </mescroll-uni>
</template>
<script>
import paymentRecordItem from "@/pages_supplier/components/order/payment-record-item.vue"
import { GetPayListByOrderId } from "@/service/api/order.js"
export default {
    props: {
        height: {
            type: String,
            default: "100px",
        },
        orderId: {
            type: Number,
            default: 0,
        },
    },
    components: {
        paymentRecordItem,
    },
    data() {
        return {
            datas: [],
            data: [],
            productList: [],
            param: {},
            downOption: {
                use: true,
            },
            checkIds: "",
        }
    },
    mounted() {
        //#ifndef MP
        this.refresh()
        //#endif
    },
    methods: {
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageSize = page.size
            param.pageIndex = page.num
            param.orderId = this.orderId
            GetPayListByOrderId(param).then((res) => {
                if (res.State == 1 && res.Data) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    res.Data.forEach((e, i) => {
                        if (e.BankInfo) {
                            e.BankInfo = JSON.parse(e.BankInfo)
                        }
                    })
                    this.datas = this.datas.concat(res.Data)
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        //刷新
        refresh() {
            this.downRefresh()
        },
    },
}
</script>

<style lang="scss" scoped>
.list {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 28rpx;

    .list-top {
        height: 124rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 1rpx solid #ebebeb;

        .line {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;

            text {
                width: 8rpx;
                height: 28rpx;
                background: #fa6400;
                border-radius: 4rpx;
                margin-right: 16rpx;
            }
        }

        .price {
            font-size: 32rpx;
            font-weight: bold;
        }

        .time {
            color: #333333;
            font-size: 24rpx;
        }

        .state {
            color: #f7b500;
            font-size: 24rpx;
        }

        & > view {
            display: flex;
            justify-content: space-between;
            padding: 2rpx 24rpx;
        }
    }

    .list-data {
        padding: 24rpx;

        & > view {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6rpx 0;

            text {
                color: $color-gray-2;
            }
        }
    }
}
</style>
